import {Modal} from 'antd'
import dynamic from 'next/dynamic'
import {QueryComponent} from '../util'
import ModalQuery from '../graphql/Modal.gql'
import {CloseModal} from '../graphql'
import {evolve} from 'ramda'

import webMapping from '../../web/pages/modal'

// type AntModalPropsType = {
//     width?: string | number,
//     zIndex?: number,
//     title?: string,
//     onCancel?: Function
// }

const AntModal = ({zIndex, title}) => {
    return (
        <QueryComponent gql={ModalQuery} render={
            props => {
                const {modal: {open, name, title, args,width}} = props
                if (!open) {
                    return null
                }
                const Content = webMapping[name]
                return Content
                    ? (
                        <CloseModal render={mutate => (
                            <Modal title={title || ''}
                                   footer={null}
                                   width={width}
                                   zIndex={zIndex}
                                   onCancel={() => mutate()}
                                   visible
                            >
                                <Content {... JSON.parse(args)}/>
                            </Modal>
                        )}/>
                    )
                    : null
            }
        }/>
    )
}

export default AntModal